<template>
    <el-row>
        <el-tabs value="first" type="card">
            <el-tab-pane label="售后列表" name="first">
                <el-table :data="serviceData" stripe style="margin-top:24px">
                    <el-table-column label="订单编号" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-row>{{scope.row.order.orderid}}</el-row>
                        </template>
                    </el-table-column>
                    <el-table-column label="售后服务" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-row>{{scope.row.service.name}}</el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="申请理由" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="refuse" label="回退理由" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column label="售后类型" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-row>{{scope.row.type?"退款":"售后"}}</el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="审核状态" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-row style="font-weight:700" :style="{color:scope.row.status==-1?'#19be6b':'#f50'}">{{scope.row.status==0?"审核中":scope.row.status==1?"已通过":"已拒绝"}}</el-row>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" header-align="center" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" @click="serviceStatus(scope.row,1)">通过</el-button>
                            <el-button type="text" @click="serviceStatus(scope.row,-1)">拒绝</el-button>
                            <el-tooltip content="通过">
                                <i class="iconfont icon-tongguo" @click='serviceStatus(scope.row,1)' style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                            </el-tooltip>
                            <el-tooltip content="拒绝">
                                <i class="iconfont icon-jujue" @click="serviceStatus(scope.row,-1)" style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row style="margin:24px 0">
                    <el-col :span="24" style="text-align:right">
                        <el-pagination background layout="total,prev,pager,next" :total="pagination.rowCount" :page-size="pagination.pageSize" @current-change="changePage"></el-pagination>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="售后服务" name="second">
                <el-button type="primary" @click="addReason">新增</el-button>
                <el-table :data="serviceReason" stripe style="margin-top:24px">
                    <el-table-column label="类型" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-row>{{scope.row.type?"退款":"售后"}}</el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="理由" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-row style="font-weight:700" :style="{color:scope.row.status?'#19be6b':'#f50'}">{{scope.row.status==0?"关闭":"开启"}}</el-row>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" header-align="center" width="100">
                        <template slot-scope="scope">
                            <el-tooltip content="编辑">
                                <i class="iconfont icon-bianji1" @click='reasonEdit(scope.row)' style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                            </el-tooltip>
                            <el-tooltip content="删除">
                                <i class="iconfont icon-shanchu2" @click="reasonDel(scope.row)" style="font-size:26px;cursor:pointer;color:rgb(158, 167, 179)"></i>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row style="margin:24px 0">
                    <el-col :span="24" style="text-align:right">
                        <el-pagination background layout="total,prev,pager,next" :total="reasonPagination.rowCount" :page-size="reasonPagination.pageSize" @current-change="changeReasonPage"></el-pagination>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="拒绝理由" :visible.sync="refuseModal" width="600px">
            <el-form label-width="80px">
                <el-form-item label="拒绝理由" required>
                    <el-input type="textarea" placeholder="请输入拒绝理由" v-model="refuse"></el-input>
                </el-form-item>
            </el-form>
            <p slot="footer">
                <el-button type="primary" @click="refuseOk">拒绝</el-button>
            </p>
        </el-dialog>
        <el-dialog title="售后服务管理" :visible.sync="reasonModal" width="600px">
            <el-form label-width="80px">
                <el-form-item label="类型">
                    <el-select v-model="type">
                        <el-option :value="0" label="售后"></el-option>
                        <el-option :value="1" label="退款"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="理由" required>
                    <el-input type="textarea" placeholder="请输入理由" v-model="name"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="status"></el-switch>
                </el-form-item>
            </el-form>
            <p slot="footer">
                <el-button type="primary" @click="reasonOk">保存</el-button>
            </p>
        </el-dialog>
    </el-row>
</template>

<script>
export default {
    layout: "shop",
    data() {
        return {
            serviceData: [],
            pagination: {},
            refuse: "",
            refuseModal: false,
            serviceReason: [],
            reasonPagination: {},
            reasonModal: false,
            type: 0,
            name: "",
            status: true,
            reason_id: 0
        };
    },
    async asyncData({ app }) {
        let data = {};
        //售后列表
        const service = await app.$axios.$get(
            "/api/shop/home/shop/order/index/service"
        );
        if (service && service.errmsg === "ok") {
            data.serviceData = service.data.data;
            data.pagination = service.data.pagination;
        }
        //售后理由列表
        const reason = await app.$axios.$get(
            "/api/shop/home/shop/order/service/index"
        );
        if (reason && reason.errmsg === "ok") {
            data.serviceReason = reason.data.data;
            data.reasonPagination = reason.data.pagination;
        }
        return data;
    },
    methods: {
        //售后列表
        async getService() {
            const service = await this.$axios.$get(
                `/api/shop/home/shop/order/index/service?page=${
                    this.pagination.page
                }`
            );
            if (service && service.errmsg === "ok") {
                this.serviceData = service.data.data;
                this.pagination = service.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getService();
        },
        //通过拒绝
        async serviceStatus(row, status) {
            this.id = row.id;
            if (row.status != 0) {
                this.$message.warning(row.status == 1 ? "已通过" : "已拒绝");
                return;
            }
            if (status == 1) {
                const res = await this.$axios.$get(
                    `/api/shop/home/shop/order/index/serviceUp?id=${
                        row.id
                    }&status=1`
                );
                if (res && res.errmsg === "ok") {
                    this.$message.warning("已通过");
                    this.getService();
                }
            } else {
                this.refuseModal = true;
            }
        },
        async refuseOk() {
            if (!this.refuse) {
                this.$message.warning("请填写拒绝理由");
                return;
            }
            const res = await this.$axios.$get(
                `/api/shop/home/shop/order/index/serviceUp?id=${
                    this.id
                }&status=-1&refuse=${this.refuse}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.warning("已拒绝");
                this.getService();
                this.refuseModal = false;
            }
        },
        //售后理由列表
        async getReason() {
            const reason = await this.$axios.$get(
                `/api/shop/home/shop/order/service/index?page=${
                    this.pagination.page
                }`
            );
            if (reason && reason.errmsg === "ok") {
                this.serviceReason = reason.data.data;
                this.reasonPagination = reason.data.pagination;
            }
        },
        changeReasonPage(page) {
            this.reasonPagination.page = page;
            this.getReason();
        },
        addReason() {
            this.reasonModal = true;
            this.reason_id = 0;
            this.type = 0;
            this.status = true;
            this.name = "";
        },
        //售后编辑
        reasonEdit(row) {
            this.reasonModal = true;
            this.type = row.type;
            this.status = row.status ? true : false;
            this.name = row.name;
            this.reason_id = row.id;
        },
        async reasonOk() {
            if (!this.name) {
                this.$message.warning("请填写理由");
                return;
            }
            const res = await this.$axios.$post(
                `/api/shop/home/shop/order/service/add`,
                {
                    id: this.reason_id,
                    name: this.name,
                    type: this.type,
                    status: this.status
                }
            );
            if (res && res.errmsg === "ok") {
                this.reasonModal = false;
                this.getReason();
                this.$message.success("保存成功");
            }
        },
        async reasonDel(row) {
            const res = await this.$axios.$get(
                `/api/shop/home/shop/order/service/del?id=${row.id}`
            );
            if (res && res.errmsg === "ok") {
                this.getReason();
                this.$message.success("删除成功");
            }
        }
    }
};
</script>